<template>
	<view>
		<!-- pages/user-list/user-list 组件 -->


		<view>
			<!-- tab切换 -->
			<swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @ToChangeTab="tabtap" scrollItemStyle="width:33%;"
				scrollStyle="border-bottom:0;">
			</swiper-tab-head>

		</view>


		<!-- <block v-for="(item,index) in list" :key="index">
						<UserList :item="item" :index="index"></UserList>
					</block> -->


		<view class="uni-tab-bar" :style="{height:swiperheight+'px'}">
			<swiper class="swiper-box" :style="{height:swiperheight+'px'}" :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(items,index) in newslist" :key="index">
					<scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">

						<!-- 判断list 是否有值  template-->
						<template v-if="items.list.length>0">

							<block v-for="(item,index1) in items.list" :key="index1">
								<UserList :item="item" :index="index1"></UserList>
							</block>


							<!-- 加载更多 -->
							<LoadMore :loadtext="items.loadtext"></LoadMore>
						</template>



						<!-- 判断没有值 -->
						<template v-else>

							<no-thing></no-thing>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>


	</view>
</template>

<script>
	import SwiperTabHead from '../../components/index/swiper-tab-head.vue'


	import UserList from '../../components/user-list/user-list.vue'

	import noThing from '../../components/common/no-thing.vue'
	
	import  LoadMore from '../../components/common/load-more.vue'

	export default {

		components: {
			SwiperTabHead,
			UserList,
			noThing,
			LoadMore
		},
		data() {
			return {
				swiperheight: 500,

				tabIndex: 0,
				tabBars: [{
						name: "互关",
						id: "huguan",
						num: 10
					},
					{
						name: "关注",
						id: "guanzhu",
						num: 20
					},
					{
						name: "粉丝",
						id: "fensi",
						num: 30
					},
				],



				newslist: [{
						loadtext: "上拉加载更多",
						list: [{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isguanzhu: true
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "昵称",
								age: 21,
								sex: 1,
								isguanzhu: false
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isguanzhu: true
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "昵称",
								age: 21,
								sex: 1,
								isguanzhu: false
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isguanzhu: true
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "昵称",
								age: 21,
								sex: 1,
								isguanzhu: false
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isguanzhu: true
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "昵称",
								age: 21,
								sex: 1,
								isguanzhu: false
							}
						]
					},
					{
						loadtext: "上拉加载更多",
						list: [{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isguanzhu: true
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "昵称",
								age: 21,
								sex: 1,
								isguanzhu: false
							}
						]
					},
					{
						loadtext: "上拉加载更多",
						list: [{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isguanzhu: true
							},
							{
								userpic: "../../static/demo/userpic/11.jpg",
								username: "昵称",
								age: 21,
								sex: 1,
								isguanzhu: false
							}
						]
					}
				],



			}
		},



		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100)
					this.swiperheight = height;
				}
			})
		},
		methods: {

			tabtap(index) {
				this.tabIndex = index
			},
			
			
			tabChange(e) {
				console.log(e.detail)
				this.tabIndex = e.detail.current
			
			},
			
			loadmore(index) {
				//滚动到底部准备进去加载更多
			
				//进行逻辑优化判断 
				var loadtext = this.newslist[index].loadtext;
			
				if (loadtext !== '上拉加载更多') return false
			
			 this.newslist[index].loadtext='正在加载中...'
				// console.log(index)
				var currentListObj = this.newslist[index];
			
				var currentList = currentListObj.list;
			
				setTimeout(() => {
					let obj = {
						
								userpic: "../../static/demo/userpic/11.jpg",
								username: "昵称",
								age: 20,
								sex: 0,
								isguanzhu: true
							
					};
			
					currentList.push(obj)
			
					this.newslist[index].loadtext = '上拉加载更多'
				}, 1000)
			
			
				// this.newslist[index].loadtext='没有更多数据了'
			
			}
			
			
			
			
			
			
			

		},
		//监听原生导航栏 左右按钮事件
		onNavigationBarButtonTap(e) {
			console.log(e)
			if(e.index==0) {
				alert('取消')
				//回退
				uni.navigateBack({
					delta:1
				})
			}
			
		}
	}
</script>

<style>

</style>
